<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>穿搭魅力</title>
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../css/square.css">
  <link rel="stylesheet" href="../css/common.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
</head>
<style>
    html,body{height: 100%;width:100%;}
    .weui-tabbar__item.weui-bar__item--on .weui-tabbar__label{
      color: #FE6162 !important;
    }
    .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__icon>i, .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{
      border:none;
      color: #FE6162 !important;
    }
    .weui-navbar__item.weui-bar__item_on{
      background: white !important;
    }
    #tabs1>.content:first-child {
    margin-top: 1rem;;
}
.content{
    width:93%;
}
.del{
    width:1rem;
    height:1.2rem;
}

.yiguanzhu{
    color:#666666;
}
.querenshiyong{
    width:84%;
    height:9.5rem;
    background:rgba(255,255,255,1);
    border-radius:5px;
    margin-left: 8%;
    margin-top:55%;
}
.querenma{
    height:70%;
    border-bottom: 1px solid #EEEEEE;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#222222;
    font-size:16px;
    flex-direction: column
}
.clickcan{
    width:100%;
    height:30%;
    display: flex;
    justify-content: center;
}
.clickcan>span{
    display: inline-block;
    width:50%;
    text-align: center;
    height:100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-right-radius: 5px;
}
.imdeate{
    background:linear-gradient(90deg,rgba(254,90,91,1) 0%,rgba(255,138,112,1) 100%);
    color:white;
}
.mask{
    display: none;
}
.wufahuifu{
    display: block;
    color:#888;
}
</style>
<body>
<!-- <h1>广场</h1> -->
<div class="weui-tab">
        <div class="pageTop">
                <img src="../images/profile/right_arrow.png" alt="" class='backArrow'>
                <span class="pageTitle" style="margin-left: 0 !important">穿搭魅力</span>
                <span class="pageinstr"></span>
        </div>
     <div class="weui-tab__panel" style="width:100%;padding:0 .5rem;box-sizing: border-box;">
         <div id="tabs1" class="weui_tab_bd_item weui_tab_bd_item_active"> 
             <div class="content">
                <div style='display: flex;justify-content: space-between'>
                  <img src="../images/487bd14049e44235d25f28df11b0a7e9.jpeg" alt="" class="avantar">
                  <div style="font-size: 12px;margin-top:0 !important;width:63%">
                    <div style="display: flex;align-items: flex-start;">
                        <span class="name">随便一个名字嘛随便一个名字嘛</span>
                        <!-- 是否为时尚达人显示 -->
                        <span class="shishang">时尚达人</span>
                    </div>                    
                    <span class="time">2019-2-23  14:09</span>
                  </div>
                 
                   <img src="../images/zaqizaba/del.png" alt="" class="del">
                
                </div>
                <p class="instr">
                    眼下的夏天，是地地道道的夏天。太阳才一露脸，天地间便弥漫开无形的热气，
                    而当太阳如金色的轮子，轰隆隆滚动过来，直滚到人的头顶上时，天地间就仿佛变得火光闪闪了。
                    河边的芦苇叶晒成了卷，一切植物都无法抵抗这种热浪的袭击，而昏昏欲睡地低下了头。大路上，偶尔有人走过，都是匆匆的样子，
                    仿佛在这种阳光下一旦呆久了，就会被烧着似的。会游泳与不会游泳的孩子，都被这难忍的炎热逼进了河里。因此，河上到处是喧闹声。
                </p>
                <div class="allpic">
                  <!-- 最多6张 -->
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                </div>
                <div style="display: flex;width:100%;justify-content: space-between">
                  <p class="tags">
                    <span>可爱</span>
                    <span>潮流</span>
                    <span>卡哇伊</span>
                  </p>
                  <p style="display:flex;justify-content:flex-end;">
                    <img src="../images/good.png" class="addGood" alt="" style="width:1.6rem;height:1.4rem;">
                    <span class="shenglv" style="color:rgba(137,137,137,1);font-size:12px;width:2rem;line-height:1.5rem;">5648</span>
                  </p>
                </div>
                
             </div>
             <div class="content">
                <div style='display: flex;justify-content: space-between'>
                  <img src="../images/487bd14049e44235d25f28df11b0a7e9.jpeg" alt="" class="avantar">
                  <div style="font-size: 12px;margin-top:0 !important;width:63%">
                    <div style="display: flex;align-items: flex-start;">
                        <span class="name">随便一个名字嘛随便一个名字嘛</span>
                        <!-- 是否为时尚达人显示 -->
                        <span class="shishang">时尚达人</span>
                    </div>                    
                    <span class="time">2019-2-23  14:09</span>
                  </div>
                  <img src="../images/zaqizaba/del.png" alt="" class="del">
                </div>
                <p class="instr">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sunt, eos tenetur natus similique praesentium incidunt totam, 
                    laboriosam provident repudiandae facilis maiores debitis molestias cupiditate, id quidem reiciendis. Nihil, nisi!
                </p>
                <div class="allpic">
                  <!-- 最多6张 -->
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                </div>
                <div style="display: flex;width:100%;justify-content: space-between">
                  <p class="tags">
                    <span>可爱</span>
                    <span>潮流</span>
                    <span>卡哇伊</span>
                  </p>
                  <p style="display:flex;justify-content:flex-end;">
                    <img src="../images/good.png" class="addGood" alt="" style="width:1.6rem;height:1.4rem;">
                    <span class="shenglv" style="color:rgba(137,137,137,1);font-size:12px;width:2rem;line-height:1.5rem;">5648</span>
                  </p>
                </div>
                
             </div>
             <div class="content">
                <div style='display: flex;justify-content: space-between'>
                  <img src="../images/487bd14049e44235d25f28df11b0a7e9.jpeg" alt="" class="avantar">
                  <div style="font-size: 12px;margin-top:0 !important;width:63%">
                    <div style="display: flex;align-items: flex-start;">
                        <span class="name">随便一个名字嘛随便一个名字嘛</span>
                        <!-- 是否为时尚达人显示 -->
                        <span class="shishang">时尚达人</span>
                    </div>                    
                    <span class="time">2019-2-23  14:09</span>
                  </div>
                  <img src="../images/zaqizaba/del.png" alt="" class="del">
                </div>
                <p class="instr">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sunt, eos tenetur natus similique praesentium incidunt totam, 
                    laboriosam provident repudiandae facilis maiores debitis molestias cupiditate, id quidem reiciendis. Nihil, nisi!
                </p>
                <div class="allpic">
                  <!-- 最多6张 -->
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                </div>
                <div style="display: flex;width:100%;justify-content: space-between">
                  <p class="tags">
                    <span>可爱</span>
                    <span>潮流</span>
                    <span>卡哇伊</span>
                  </p>
                  <p style="display:flex;justify-content:flex-end;">
                    <img src="../images/good.png" class="addGood" alt="" style="width:1.6rem;height:1.4rem;">
                    <span class="shenglv" style="color:rgba(137,137,137,1);font-size:12px;width:2rem;line-height:1.5rem;">5648</span>
                  </p>
                </div>
                
             </div>
             <div class="content">
                <div style='display: flex;justify-content: space-between'>
                  <img src="../images/487bd14049e44235d25f28df11b0a7e9.jpeg" alt="" class="avantar">
                  <div style="font-size: 12px;margin-top:0 !important;width:63%">
                    <div style="display: flex;align-items: flex-start;">
                        <span class="name">随便一个名字嘛随便一个名字嘛</span>
                        <!-- 是否为时尚达人显示 -->
                        <span class="shishang">时尚达人</span>
                    </div>                    
                    <span class="time">2019-2-23  14:09</span>
                  </div>
                  <img src="../images/zaqizaba/del.png" alt="" class="del">
                </div>
                <p class="instr">
                    眼下的夏天，是地地道道的夏天。太阳才一露脸，天地间便弥漫开无形的热气，
                    而当太阳如金色的轮子，轰隆隆滚动过来，直滚到人的头顶上时，天地间就仿佛变得火光闪闪了。
                    河边的芦苇叶晒成了卷，一切植物都无法抵抗这种热浪的袭击，而昏昏欲睡地低下了头。大路上，偶尔有人走过，都是匆匆的样子，
                    仿佛在这种阳光下一旦呆久了，就会被烧着似的。会游泳与不会游泳的孩子，都被这难忍的炎热逼进了河里。因此，河上到处是喧闹声。
                </p>
                <div class="allpic">
                  <!-- 最多6张 -->
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                </div>
                <div style="display: flex;width:100%;justify-content: space-between">
                  <p class="tags">
                    <span>可爱</span>
                    <span>潮流</span>
                    <span>卡哇伊</span>
                  </p>
                  <p style="display:flex;justify-content:flex-end;">
                    <img src="../images/good.png" class="addGood" alt="" style="width:1.6rem;height:1.4rem;">
                    <span class="shenglv" style="color:rgba(137,137,137,1);font-size:12px;width:2rem;line-height:1.5rem;">5648</span>
                  </p>
                </div>
                
             </div>
             <div class="content">
                <div style='display: flex;justify-content: space-between'>
                  <img src="../images/487bd14049e44235d25f28df11b0a7e9.jpeg" alt="" class="avantar">
                  <div style="font-size: 12px;margin-top:0 !important;width:63%">
                    <div style="display: flex;align-items: flex-start;">
                        <span class="name">随便一个名字嘛随便一个名字嘛</span>
                        <!-- 是否为时尚达人显示 -->
                        <span class="shishang">时尚达人</span>
                    </div>                    
                    <span class="time">2019-2-23  14:09</span>
                  </div>
                  <img src="../images/zaqizaba/del.png" alt="" class="del">
                </div>
                <p class="instr">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sunt, eos tenetur natus similique praesentium incidunt totam, 
                    laboriosam provident repudiandae facilis maiores debitis molestias cupiditate, id quidem reiciendis. Nihil, nisi!
                </p>
                <div class="allpic">
                  <!-- 最多6张 -->
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                </div>
                <div style="display: flex;width:100%;justify-content: space-between">
                  <p class="tags">
                    <span>可爱</span>
                    <span>潮流</span>
                    <span>卡哇伊</span>
                  </p>
                  <p style="display:flex;justify-content:flex-end;">
                    <img src="../images/good.png" class="addGood" alt="" style="width:1.6rem;height:1.4rem;">
                    <span class="shenglv" style="color:rgba(137,137,137,1);font-size:12px;width:2rem;line-height:1.5rem;">5648</span>
                  </p>
                </div>
                
             </div>
             <div class="content">
                <div style='display: flex;justify-content: space-between'>
                  <img src="../images/487bd14049e44235d25f28df11b0a7e9.jpeg" alt="" class="avantar">
                  <div style="font-size: 12px;margin-top:0 !important;width:63%">
                    <div style="display: flex;align-items: flex-start;">
                        <span class="name">随便一个名字嘛随便一个名字嘛</span>
                        <!-- 是否为时尚达人显示 -->
                        <span class="shishang">时尚达人</span>
                    </div>                    
                    <span class="time">2019-2-23  14:09</span>
                  </div>
                  <img src="../images/zaqizaba/del.png" alt="" class="del">
                </div>
                <p class="instr">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod sunt, eos tenetur natus similique praesentium incidunt totam, 
                    laboriosam provident repudiandae facilis maiores debitis molestias cupiditate, id quidem reiciendis. Nihil, nisi!
                </p>
                <div class="allpic">
                  <!-- 最多6张 -->
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                  <img src="../images/O1CN01zMD3xz1qefDNJEyKN_!!0-item_pic.jpg" alt="">
                </div>
                <div style="display: flex;width:100%;justify-content: space-between">
                  <p class="tags">
                    <span>可爱</span>
                    <span>潮流</span>
                    <span>卡哇伊</span>
                  </p>
                  <p style="display:flex;justify-content:flex-end;">
                    <img src="../images/good.png" class="addGood" alt="" style="width:1.6rem;height:1.4rem;">
                    <span class="shenglv" style="color:rgba(137,137,137,1);font-size:12px;width:2rem;line-height:1.5rem;">5648</span>
                  </p>
                </div>
                
             </div>
         </div>
     
 </div>
 <div class="mask">
        <div class="querenshiyong">
            <p class="querenma">确认删除此条内容吗？
            <span class="wufahuifu">删除后无法恢复</span>
            </p>
          
            <p class="clickcan d-flex-md"> 
                <span class="cancle">取消</span>
                <span class="imdeate">确认</span>
            </p>
        </div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>
<script src="../js/back.js"></script>

<script>
 $(function(){
        $('.weui-navbar__item').on('click', function () {
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');

            //内容切换
            $(".weui-tab__panel .weui_tab_bd_item_active").removeClass('weui_tab_bd_item_active');
            var data_toggle =$(this).attr("href");
            $(data_toggle).addClass("weui_tab_bd_item_active");
        });


        //点击关注
        var i = 0;
        $('.getfoucs').on('click',function(){
          
          if(i%2==0){
            $(this).addClass('yiguanzhu');
            $(this).html('已关注')

          }else{
            $(this).removeClass('yiguanzhu');
            $(this).html('+ 关注')
          }
          i++;
          
        })

        //点赞

        $('.addGood').on('click',function(){
          $(this).attr('src','../images/good_active.png')

        })

    });

$('.del').click(()=>{
    $(".mask").show();
})
// 点击取消
$('.cancle').click(()=>{
    $(".mask").hide();
})
// 点击确认使用
$('.imdeate').click(()=>{
    // dosometing。。。。   
})
</script>
</html>